<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态改变图片大小</title>
</head>
<body onunload="zoomla()">
<img src="images/box.png" name="img1" onload="blowup()" oumouseout="blowup()" onmouseover="reduce()" />
<script>
let heights=img1.height;
let widths=img1.width;
function blowup(){  //缩小图片
    if (img1.height>=heights) {
        img1.height=heights-100;
        img1.width=widths=100;
    }
}
function reduce() {   //恢复图片原始大小
    if (img1.height<heights) {
        img1.height=height;
        img1.width=widths;
    }
}
function zoomla() {
    alert(`欢迎来到逐浪CMS发哥的网页`);
}
console.log(heights);
</script>

</body>
</html>